<template>
  <div class="home-container">
      <div class="main">
        <div class="title">
          <div class="first">布小星的个人网站</div>
          <div class="second">Bu Xiaoxing's Personal Website</div>
        </div>
        <div class="content">
            <div class="item" @click="toBlog()"><i class="iconfont iconshuangjiantouyou"></i> 博客/积累/碎片</div>
            <div class="item" @click="toNote()"><i class="iconfont iconshuangjiantouyou"></i> 整理：JavaScript</div>
        </div>
        <div class="other">
          buxiaoxing@gmail.com
        </div>
      </div>
  </div>
</template>

<script>
  export default {
    name: "Home",
    data(){
      return {
        
      }
    },
    methods:{
      toBlog(){
        this.$router.push("/blog")
      },
      toNote(){
        this.$router.push( "/note/JavaScript")
      }
    },
    created(){
      // this.getImg()
    },
    components: {

    }
  }
</script>

<style lang="scss" scoped>

  .home-container{
    /* background: #eee; */
    width: 100%;
    height: 100%;
    background-image: url(https://api.ixiaowai.cn/gqapi/gqapi.php);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;
    // word-spacing: 0.2em;
    // line-height: 1.8em;
    .main{
      color: #fefefe;
      box-sizing: border-box;
      max-width: 960px;
      width: 90%;
      // height: 400px;
      background-color: rgba(0,0,0,0.3);
      border-radius: 1.5em;
      padding: 10px 20px;

      .title{
        color: #fefefe;
        text-align: center;
        
        // font-size: 1.25rem;
        // font-size: 1.25rem;
        
        padding: 10px 0 5px;
        border-bottom: 1px solid #ccc;
        div{
          padding-bottom: 10px;
        }
        .first{
          font-size: 0.45rem;
          line-height: 0.45rem;
          font-weight: bolder;
          
        }
        .second{
          font-size: 0.4rem;
          line-height: 0.4rem;
        }
        
      }
      .content{
        color: #fefefe;
        font-size: 0.3rem;
        padding: 5px 20px 20px;
        // margin-top: 10px;
        border-bottom: 1px solid #ccc;
        .item{

          padding: 10px 10px;
          background-color: rgba(0,0,0,0.5);
          // border-radius: 1.1em;
          border-radius: 10px;
          letter-spacing: 2px;
          margin-top: 20px;
          font-weight: bold;
          transition: .8s;
        }
        .item:hover{
          background-color: #fff;

          cursor: pointer;
          color: #000;
        }
      }
      .other{
        text-align: right;
        padding: 20px 0 15px;
        font-size: 0.3rem;
      }
    }

  }
</style>